<template>
  <div class="stockDiv">
    {{getStockList()}}
    <div class="headDiv">
      <template>

        <el-button type="success" size="medium" @click="toAdd">添加</el-button>

        <span class="queryName">货品名称:</span>
        <el-input v-model="q.name" style="width: 250px;font-size: 16px" clearable></el-input>
        <span>进货日期:</span>
          <el-date-picker
            v-model="q.stockDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        <span class="queryBtn"></span>
        <el-button type="warning" size="medium" @click="query">搜索</el-button>
        <span class="queryByStockDateSort">按进货日期排序:</span>
        <el-radio-group v-model="q.sort" @change="query">
          <el-radio-button :label=1>降序</el-radio-button>
          <el-radio-button :label=0>升序</el-radio-button>
        </el-radio-group>
      </template>
    </div>
    <div class="bodyDiv">
      <el-table :data="stockList" style="width: 100%" :header-cell-style="{background:'#DCDCDC',color:'#606266'}">
        <el-table-column width="80" prop="id" label="编号" header-align="center" align="center"></el-table-column>
        <el-table-column width="150" prop="stockDate" label="进货日期" header-align="center" align="center"></el-table-column>
        <el-table-column width="100" prop="name" label="货品名称" header-align="center" align="center"></el-table-column>
        <el-table-column width="120" prop="param" label="货品规格" header-align="center" align="center"></el-table-column>
        <el-table-column width="120" prop="price" label="货品单价(元/*)" header-align="center" align="center"></el-table-column>
        <el-table-column width="100" prop="count" label="数量" header-align="center" align="center"></el-table-column>
        <el-table-column width="100" prop="cost" label="总金额(元)" header-align="center" align="center"></el-table-column>
        <el-table-column width="220" prop="provider" label="供应商" header-align="center" align="center"></el-table-column>
        <el-table-column width="220" prop="remark" label="备注" header-align="center" align="center"></el-table-column>
        <el-table-column width="80" prop="createdUser" label="入库人" header-align="center" align="center"></el-table-column>
        <el-table-column width="80" prop="modifiedUser" label="修改者" header-align="center" align="center"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="s">
            <el-button type="primary" size="mini" @click="toUpdate(s.$index,s.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(s.$index,s.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bodyBottom">
        <div class="bodyBottomPage">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.page"
            :page-sizes="page.pageSizeList"
            :page-size="page.pageSize"
            layout="prev,pager,next,total,sizes"
            :total="page.total">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="进货记录" :visible.sync="dialogVisible" width="20%">
      <el-form v-model="m" label-width="100px">
        <el-form-item label="进货日期">
          <el-date-picker
            style="width: 243px"
            v-model="m.stockDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="货品名称">
          <el-input v-model="m.name"></el-input>
        </el-form-item>
        <el-form-item label="货品规格">
          <el-input v-model="m.param"></el-input>
        </el-form-item>
        <el-form-item label="货品单价(元)">
          <el-input v-model="m.price"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="m.count"></el-input>
        </el-form-item>
        <el-form-item label="总金额(元)">
          <el-input v-model="m.cost"></el-input>
        </el-form-item>
        <el-form-item label="供应商信息">
          <el-input v-model="m.provider"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="m.remark"></el-input>
        </el-form-item>
      </el-form>
      <span style="margin-left: 170px">
        <el-button type="primary" @click="ok">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import * as qs from "qs";

export default {
  name: 'StockM',
  data() {
    return {
      dialogVisible:false,
      isAdd:false,
      refresh:0,
      q:{
        name: '',
        stockDate:null,
        sort:1
      },
      page: {
        page: 1,
        pageSizeList: [10, 20, 50,100],
        pageSize: 20,
        total: 100,
      },
      m:{
        id:'',
        stockDate:'',
        name:'',
        param:'',
        price:'',
        count:'',
        cost:'',
        provider:'',
        remark:'',
      },
      stockList: [],
    }
  },
  methods: {
    getStockList: function () {
      if (this.refresh === 0) {
        this.refresh++;
        this.q.name = this.q.name.trim() === '' ? ' ' : this.q.name;
        this.q.stockDate = this.q.stockDate === '' ? ' ' : this.q.stockDate;
        var that =this;
        axios.get("http://localhost:8081/stock?name=" + this.q.name + '&stockDateStr=' + this.q.stockDate + '&sort=' + this.q.sort + '&page=' + this.page.page + '&pageSize=' + this.page.pageSize)
          .then(res=>{
            that.page.total = res.data.data.total;
            that.stockList = res.data.data.list;
            for (let i = 0; i < that.stockList.length; i++) {
              that.stockList[i].cost = (that.stockList[i].cost/100).toFixed(2);
            }
          })
      }
    },
    toAdd: function () {
      this.dialogVisible = true;
      this.m = {};
      this.isAdd = true;
    },
    toUpdate(index, row) {
      this.dialogVisible = true;
      this.isAdd = false;
      this.m = JSON.parse(JSON.stringify(row));
    },
    ok: function () {
      var that = this;
      this.m.cost = this.m.cost*100;
      if (this.isAdd){
        axios.post("http://localhost:8081/stock",this.m).then(function (result) {
          that.messageAlert(result.data.status,result.data.msg);
          if(result.data.status === 1){
            that.query();
          }
        })
      }else {
        axios.put("http://localhost:8081/stock",this.m).then(function (result) {
          that.messageAlert(result.data.status,result.data.msg);
          if(result.data.status === 1){
            that.query();
          }
        })
      }
      this.cancel();
    },
    cancel: function () {
      this.dialogVisible = false;
    },
    del(index, row) {
      var that = this;
      axios.delete("http://localhost:8081/stock/"+row.id).then(function (result) {
        that.messageAlert(result.data.status,result.data.msg);
        if(result.data.status === 1){
          that.query();
        }
      })
    },
    query: function () {
      this.refresh = 0;
      this.getStockList();
    },
    handleSizeChange: function (val) {
      this.page.page = 1;
      this.page.pageSize = val;
      this.query();
    },
    handleCurrentChange: function (val) {
      this.page.page = val;
      this.query();
    },
    messageAlert: function (flag, msg) {
      if (flag === 1) {
        this.$message({
          message: msg,
          center: true,
          type: "success"
        })
      } else {
        this.$message({
          message: msg,
          center: true,
          type: "error"
        })
      }
    }
  }
}

</script>


<style>
.headDiv {
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.queryName {
  margin-left: 200px;
}

.queryBtn{
  margin-left: 30px;
}
.queryByStockDateSort{
  margin-left: 150px;
}

.bodyDiv {
  margin-top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.bodyBottom {
  height: 60px;
}

.bodyBottomPage {
  margin-top: 30px;
}

</style>
